@extends('layouts.app')
@section('title', isset($category) ? $category->name : '话题列表')
@section('styles')
  <link href="/static/layuiadmin/style/admin.css" rel="stylesheet">
  <link href="/static/layuiadmin/style/template.css" rel="stylesheet">

@endsection
@section('content')
<div class="layui-fluid layadmin-homepage-fluid">
  <div class="layui-row layui-col-space8 layadmin-caller">
    <div class="layui-col-md12">
      <div class="layui-fluid layadmin-homepage-content">
        <div class="layui-row  layadmin-homepage-padding15">
          <!-- <hr class="new-section-xs"></hr> -->
        </div>
        <div class="layui-col-md7 layadmin-homepage-padding8">
          @if(isset($category))
            <div class="alert-info">{{$category->name}}：{{$category->description}}</div>
          @endif
        </div>
        <div class="layui-row layui-col-space20 layadmin-homepage-list-imgtxt">
          <div class="layui-col-md9 layui-col-space20">
            <div class="layui-tab layui-tab-brief caller-tab" lay-filter="docDemoTabBrief">
              <ul class="layui-tab-title">
                <li class="{{ active_class( ! if_query('order', 'recent'), 'layui-this') }}"><a href="{{ Request::url() }}?order=default">最后回复</a></li>
                <li class="{{ active_class( if_query('order', 'recent'), 'layui-this') }}"><a href="{{ Request::url() }}?order=recent">最新发布</a></li>
              </ul>
            </div>
            <div class="caller-contar">
              @if($topics->count() > 0)
                @foreach($topics as $topic)
                  @include('topics._topic_list_item', ['topic'=>$topic])
                @endforeach
                @else
                  <div class="empty-block">暂无数据 ~_~ </div>
              @endif
              <div id="topic-list-pages"></div>
            </div>
          </div>
          <div class="layui-col-md3">
            <div class="grid-demo">
              <div class="layui-card homepage-top">
                <div class="layui-card-header">
                  <h3 class="panel-title">
                    <i class="layui-icon layui-icon-picture"></i>
                    画廊
                  </h3>
                </div>
                <div class="layui-card-body">
                  <div class="layui-row layui-col-space15">
                    <div class="layui-col-md4">
                      <img src="../../layuiadmin/style/res/template/portrait.png">
                    </div>
                    <div class="layui-col-md4">
                      <img src="../../layuiadmin/style/res/template/portrait.png">
                    </div>
                    <div class="layui-col-md4">
                      <img src="../../layuiadmin/style/res/template/portrait.png">
                    </div>
                    <div class="layui-col-md4">
                      <img src="../../layuiadmin/style/res/template/portrait.png">
                    </div>
                    <div class="layui-col-md4">
                      <img src="../../layuiadmin/style/res/template/portrait.png">
                    </div>
                    <div class="layui-col-md4">
                      <img src="../../layuiadmin/style/res/template/portrait.png">
                    </div>
                    <div class="layui-col-md4">
                      <img src="../../layuiadmin/style/res/template/portrait.png">
                    </div>
                    <div class="layui-col-md4">
                      <img src="../../layuiadmin/style/res/template/portrait.png">
                    </div>
                    <div class="layui-col-md4">
                      <img src="../../layuiadmin/style/res/template/portrait.png">
                    </div>
                    <div class="layui-col-md12 margin-top10">
                      <a href="javascript:;"  class="layui-btn layui-btn-primary">更多</a>
                    </div>
                  </div>
                </div>
              </div>
              <div class="layui-card homepage-bottom">
                <div class="layui-card-header">
                  <h3 class="panel-title">
                    <i class="layui-icon layui-icon-user"></i>
                    私信
                  </h3>
                </div>
                <div class="layui-card-body">
                    <a href="javascript:;" class="layadmin-privateletterlist-item">
                      <div class="meida-left">
                        <img src="../../layuiadmin/style/res/template/portrait.png">
                      </div>
                      <div class="meida-right">
                        <p>Hugo</p>
                        <mdall>人生是一场修行,不要轻易交白卷</mdall>
                      </div>
                    </a>
                    <a href="javascript:;" class="layadmin-privateletterlist-item">
                      <div class="meida-left">
                        <img src="../../layuiadmin/style/res/template/portrait.png">
                      </div>
                      <div class="meida-right">
                        <p>Hugo</p>
                        <mdall>人生是一场修行,不要轻易交白卷</mdall>
                      </div>
                    </a>
                    <a href="javascript:;" class="layadmin-privateletterlist-item">
                      <div class="meida-left">
                        <img src="../../layuiadmin/style/res/template/portrait.png">
                      </div>
                      <div class="meida-right">
                        <p>Hugo</p>
                        <mdall>人生是一场修行,不要轻易交白卷</mdall>
                      </div>
                    </a>
                    <a href="javascript:;" class="layadmin-privateletterlist-item">
                      <div class="meida-left">
                        <img src="../../layuiadmin/style/res/template/portrait.png">
                      </div>
                      <div class="meida-right">
                        <p>Hugo</p>
                        <mdall>人生是一场修行,不要轻易交白卷</mdall>
                      </div>
                    </a>
                     <a href="javascript:;" class="layadmin-privateletterlist-item">
                      <div class="meida-left">
                        <img src="../../layuiadmin/style/res/template/portrait.png">
                      </div>
                      <div class="meida-right">
                        <p>Hugo</p>
                        <mdall>人生是一场修行,不要轻易交白卷</mdall>
                      </div>
                    </a>
                    <a href="javascript:;" class="layadmin-privateletterlist-item">
                      <div class="meida-left">
                        <img src="../../layuiadmin/style/res/template/portrait.png">
                      </div>
                      <div class="meida-right">
                        <p>Hugo</p>
                        <mdall>人生是一场修行,不要轻易交白卷</mdall>
                      </div>
                    </a>
                  </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

@endsection

@section('js')
<script>
  layui.use('laypage', function(){
    var laypage = layui.laypage;
    //执行一个laypage实例
    laypage.render({
      elem: 'topic-list-pages' //注意，这里是 ID，不用加 # 号
      ,count: {{$count ?? ''}}    //数据总数，从服务端得到
      ,curr: {{$curr ?? ''}} //获取起始页
      ,jump: function(obj, first){
        //首次不执行
        if(!first){
          var url = "{{ route('topics.index')}}" + "?page=" + obj.curr;
          window.location.href = url;
        }
      }
    });
  });
</script>
@endsection
